<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 150px;
            background-color: brown;
            margin: 20px auto;
            position: relative;
        }

        img {
            width: 400px;
            height: 150px;
            display: none;
        }

        span {
            background-color: white;
            font-size: 40px;
            position: absolute;
            float: left;
            opacity: 0.5;
        }

        span:first-child {
            margin-top: 45px;
            opacity: 0;
            position: absolute;
        }

        span:first-child:hover {
            opacity: 1;
        }

        span:last-child {
            margin-left: 371px;
            margin-top: -100px;
            opacity: 0;
        }

        span:last-child:hover {
            opacity: 1;
        }

        .active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">

        <div class="imgs">
            <img class="active" src="img/01.jpeg" alt="">
            <img src="img/02.jpg" alt="">
            <img src="img/03.jpeg" alt="">
            <img src="img/04.jpg" alt="">
        </div>
        <!-- <span>&lt;</span> -->
        <span id="next">&gt;</span>
    </div>

    <script>
        let imga = document.querySelectorAll("img");
        let next = document.querySelector("#next");
        let ls = 0;

        imga.forEach(function (item, index) {
            next.onclick = function () {
                // imga[index].style.display = "block";
                // // imga[index - 1].style.display = "none";
                // index++;
                if(ls>3){
                    ls=0;
                }
                imga.forEach(function(item){
                    item.classList.remove("active");
                });
                imga[ls].classList.remove("active" ) ;
                 ls=ls+1;
                imga[ls].classList.add("active");
                
                
            }

            
        })
    </script>
</body>

</html>